<template>
    <div class="login">
        <div class="back" @click="back">X</div>
        <div class="title">
            <h3 style="color: #fff">登录</h3>
        </div>
        <van-form @submit="onSubmit" style="margin-top: 10px;">
            <van-field  v-model="uname" name="uname" label="用户名" placeholder="请输入用户名" />

            <van-field  v-model="upassword" type="password" name="upass" label="密码" placeholder="请输入密码" style="margin-top: 5px;"/>

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">登录</van-button>
            </div>

            <div class="register">
                <router-link class="link" to="/register"><b>还没账号，立即注册?</b></router-link>
            </div>

            <div class="message">
                <van-checkbox  icon-size="12px" v-model="checked"></van-checkbox>
                阅读并同意懂乎的
                <a href="#">《服务协议》</a>
                <a href="#">《个人信息保护政策》</a>
            </div>
        </van-form>
    </div>
</template>

<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    background: linear-gradient(to top,#a5bfe0, #4672c9);
    .back{
        color: #ccc;
        font-size: 1rem;
        margin-top: 5px;
        margin-left: 5px;
    }
    .title{
        width: 6.25rem;
        margin: 0 auto;
        margin-top: 20px;
        text-align: center;
    }
    .register{
        font-size: 18px;
        margin-left: 5px;
        
        a{
            color: #ccc;
        }
    }
    .message{
        font-size: 16px;
        margin-top: 10px;
        margin-left: 5px;
        color: #ccc;
        // background-color: #ccc;
        a{
            color: blue;
        }
    }
    .van-checkbox {
      display: inline-block !important;
    }
}
</style>

<script>
import { Toast,Field ,Dialog} from 'vant'
let users=[];
let users_str=localStorage.getItem('users');
if(users_str){
    users=JSON.parse(users_str)
}
console.log(users);


export default {
    data(){
        return{
            uname:'',
            upassword:'',
            checked:false,
        }
    },
    methods:{
        back(){
            this.$router.push({path: '/home'})
        },
        onSubmit(values){
            if(!this.checked){
                Toast('请勾选协议和政策');
                return false
            }
            console.log(values);
            let uname=values.uname
            let upass=values.upass
            if(uname==''||upass==''){
                Toast('输入框不能为空~');
                return false;
            }

            let arr =users.filter(item => {
                return item.username == uname && item.password == upass;
            })

            if(arr.length == 1){
                Dialog.alert({
                  message:'登录成功',
                }).then(()=>{
                    this.$router.push({ path: '/my'});
                })
            }else {
                let arr2 = users.filter(item => item.username == uname)
                if (arr2.length == 0) {
                    Toast('该账号不存在')
                }
                else {
                    Toast('账号或者密码错误')
                }
            }
            
        }
    }
}
</script>